<template>
  <div class="px-22px pt-21px">
    <div class="bg-mask-3 w-full h-96px flex items-center">
      <div
        v-for="(type, index) in types"
        :key="type.value"
        class="flex items-center ml-36px cursor-pointer"
        @click="toggleType(type)"
      >
        <div class="text-22px text-white flex flex-col items-center">
          <div :class="{ 'color-coupon': type.value === typeActive }">{{ type.label }}</div>
          <div
            class="text-white w-92px h-21px leading-21px font-medium text-center text-12px tracking-wider rounded-38px mt-10px"
            :class="{
              'bg-coupon': type.value === typeActive
            }"
          >
            {{ type.value === 1 ? commonNumber.length : vipNumber.length }}张
          </div>
        </div>
        <div
          v-if="index !== types.length - 1"
          class="w-1px h-33px ml-36px"
          style="background: #dadada"
        ></div>
      </div>
    </div>
    <div class="flex items-center justify-between">
      <div class="flex items-center py-12px px-12px rounded-2px" style="background: #aaa">
        <div
          v-for="(tab, index) in tabs"
          :key="tab.value"
          class="text-white cursor-pointer px-10px"
          :class="{ 'ml-16px': index !== 0, 'color-coupon': active === tab.value }"
          @click="toggle(tab.value)"
        >
          <span class="text-18px mr-16px">{{ tab.label }}</span>
          <!-- <span v-if="index !== tabs.length - 1" class="text-white">|</span> -->
        </div>
      </div>
      <!-- <div class="text-18px text-white cursor-pointer">删除</div> -->
    </div>
    <!-- 没有优惠券 -->
    <div v-if="current.length <= 0" class="w-full flex items-center flex-col">
      <div
        class="mt-100px w-137px h-137px rounded-[50%] bg-white"
        style="border: 4px solid #4979ff"
      >
        <img :src="NoCouponIcon" alt="" />
      </div>
      <div class="mt-28px text-18px font-medium text-white">一张优惠券也没有</div>
      <div class="text-14px mt-10px" style="color: #dbdbdb">
        {{ typeActive === 1 ? '去领卷中心看看优惠好卷吧' : '去会员中心看看优惠好券吧' }}
      </div>
      <div
        class="w-95px h-27px rounded-20px text-center leading-27px text-white mt-18px tracking-wider cursor-pointer"
        style="border: 1px solid #fff"
        @click="gocoupon"
      >
        去看看
      </div>
    </div>
    <div v-else class="flex flex-wrap mt-10px pb-50px">
      <coupon-list
        v-for="(item, index) in current"
        :key="item.userCoupons?.code"
        :status="item.recieved"
        :data="item"
        action="立即使用"
        :class="{
          'mr-38px': (index + 1) % 3! !== 0,
          'mt-16px': index > 2,
          'mt-8px': index <= 2
        }"
        @on-del="del"
        @on-receive="onRecieve(item)"
      >
        <template #timeout>
          <div class="text-12px mt-6px">有效期至{{ item.timeout }}</div>
        </template>
      </coupon-list>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, computed } from 'vue'
import NoCouponIcon from '@renderer/assets/noCoupon.svg'
import { useRouter } from 'vue-router'
import { useUserStore } from '@renderer/store/modules/user'
import CouponList from '@renderer/views/coupon/components/list.vue'
import useHttp from '@renderer/utils/http'

const router = useRouter()

const active = ref<number>(0)
const typeActive = ref<number>(1)

const user = useUserStore()

const types = ref<any>([
  {
    label: '普通优惠券',
    value: 1
  },
  {
    label: '会员专属优惠券',
    value: 2
  }
])

const tabs = ref<any>([
  {
    label: '全部',
    value: 0
  },
  {
    label: '商品',
    value: 1
  },
  {
    label: '网费',
    value: 2
  },
  {
    label: '酒店',
    value: 4
  },
  {
    label: '台球',
    value: 6
  },
  {
    label: '麻将',
    value: 5
  }
])

const commonNumber = computed(() => {
  return user.coupons?.filter((coupon) => !coupon.userCoupons?.level_id)
})
const vipNumber = computed(() => {
  return user.coupons?.filter((coupon) => coupon.userCoupons?.level_id)
})

const current = computed(() => {
  if (typeActive.value === 1) {
    if (active.value === 0) {
      return commonNumber.value
    }
    return commonNumber.value.filter((coupon) => coupon.type === active.value)
  }
  if (active.value === 0) {
    return vipNumber.value
  }
  return vipNumber.value.filter((coupon) => coupon.type === active.value)
})

const toggle = (id) => {
  active.value = id
}

const toggleType = (type) => {
  typeActive.value = type.value
}

const gocoupon = () => {
  if (typeActive.value === 1) {
    router.replace({ name: 'Coupon' })
  } else {
    router.replace({ name: 'Vip' })
  }
}
onMounted(async () => {
  await user.setCoupon(typeActive.value === 1 ? null : 1)
})

watch(
  () => typeActive.value,
  async (v) => {
    await user.setCoupon(v === 1 ? null : 1)
  }
)
const onRecieve = (item) => {
  router.replace({ name: 'CouponList', query: { id: item.id } })
}

const del = async (data) => {
  const { data: res } = await useHttp('/coupon/c/user/del').post({ couponId: data.id }).json()
  if (res.value.code === 200) {
    await user.setCoupon(typeActive.value === 1 ? null : 1)
  }
}
</script>

<style scoped></style>
